<!-- 客户信息~ -->
<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :style="cardStyle" :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item :label="this.$t('search.name')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input :placeholder="this.$t('placeholder.pleaseInputName')"
                           v-model="queryParam.supplier"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item :label="this.$t('search.telephone')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input :placeholder="this.$t('placeholder.pleaseInputTelephone')"
                           v-model="queryParam.telephone"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item :label="this.$t('search.phoneNum')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input :placeholder="this.$t('placeholder.pleaseInputPhoneNum')"
                           v-model="queryParam.phonenum"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuery">{{ $t('button.search') }}</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">{{ $t('button.reset') }}</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator"  style="margin-top: 5px">
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="handleAdd" type="primary" icon="plus">
            {{ $t('button.add') }}
          </a-button>
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="batchDel" icon="delete">{{ $t('button.delete') }}
          </a-button>
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="batchSetStatus(true)" icon="check-square">
            {{ $t('button.enable') }}
          </a-button>
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="batchSetStatus(false)" icon="close-square">
            {{ $t('button.disable') }}
          </a-button>
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="handleImportXls()" icon="import">
            {{ $t('button.import') }}
          </a-button>
          <a-button v-if="btnEnableList.indexOf(3)>-1" @click="handleExportXls('客户信息')" icon="download">
            {{ $t('button.export') }}
          </a-button>
        </div>
        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :scroll="scroll"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">{{ $t('button.edit') }}</a>
              <a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" />
              <a-popconfirm v-if="btnEnableList.indexOf(1)>-1" :title="$t('title.confirmDelete')"
                            @confirm="() => handleDelete(record.id)">
                <a>{{ $t('button.delete') }}</a>
              </a-popconfirm>
            </span>
            <!-- 状态渲染模板 -->
            <template slot="customRenderFlag" slot-scope="enabled">
              <a-tag v-if="enabled" color="green">{{ $t('status.enabled') }}</a-tag>
              <a-tag v-if="!enabled" color="orange">{{ $t('status.disabled') }}</a-tag>
            </template>
          </a-table>
        </div>
        <!-- table区域-end -->
        <!-- 表单区域 -->
        <customer-modal ref="modalForm" @ok="modalFormOk"></customer-modal>
        <import-file-modal ref="modalImportForm" @ok="modalFormOk"></import-file-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<!-- BY cao_yu_li -->
<script>
import CustomerModal from './modules/CustomerModal'
import ImportFileModal from '@/components/tools/ImportFileModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'

export default {
    name: "CustomerList",
    mixins:[JeecgListMixin],
    components: {
      CustomerModal,
      ImportFileModal,
      JDate
    },
    data () {
      return {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 18,
          offset: 1
        },
        // 查询条件
        queryParam: {
          supplier:'',
          type:'客户',
          telephone:'',
          phonenum:''
        },
        ipagination:{
          pageSizeOptions: ['10', '20', '30', '100', '200']
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width: 30,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: this.$t('dynamic.operation'),
            dataIndex: 'action',
            width: 100,
            align:"center",
            scopedSlots: { customRender: 'action' },
          },
          {title: this.$t('search.dealerCode'), dataIndex: 'dealerCode', width: 100, align: 'left'},
          {title: this.$t('search.name'), dataIndex: 'supplier', width: 110, align: 'left'},
          { title: this.$t('search.contacts'), dataIndex: 'contacts', width: 70, align: 'left' },
          {title: this.$t('search.telephone'), dataIndex: 'telephone', width: 90, align: 'left'},
          {title: this.$t('search.phoneNum'), dataIndex: 'phoneNum', width: 90, align: 'left'},
          {title: this.$t('search.email'), dataIndex: 'email', width: 130, align: 'left'},
          { title: this.$t('search.initialReceivable'), dataIndex: 'beginNeedGet', width: 80, align: 'left' },
          { title: this.$t('search.finalReceivable'), dataIndex: 'allNeedGet', width: 80, align: 'left' },
          { title: this.$t('search.taxRate'), dataIndex: 'taxRate', width: 80, align: 'left' },
          //{ title: this.$t('search.sort'), dataIndex: 'sort', width: 60,align:"left"},
          { title: this.$t('search.creditLimit'), dataIndex: 'creditLimit', width: 70, align: 'left' },
          {title: this.$t('search.billOverdueDay'), dataIndex: 'billOverdueDay', width: 60, align: 'left'},
          {
            title: this.$t('search.status'), dataIndex: 'enabled', width: 60, align: 'center',
            scopedSlots: { customRender: 'customRenderFlag' }
          }
        ],
        url: {
          list: "/supplier/list",
          delete: "/supplier/delete",
          deleteBatch: "/supplier/deleteBatch",
          importExcelUrl: "/supplier/importCustomer",
          exportXlsUrl: "/supplier/exportExcel",
          batchSetStatusUrl: "/supplier/batchSetStatus"
        }
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`;
      }
    },
    created() {
    },
    methods: {
      searchReset() {
        this.queryParam = {
          type:'客户',
        }
        //加载第一页列表
        this.loadData(1);
      },
      handleImportXls() {
        let importExcelUrl = this.url.importExcelUrl
        let templateUrl = '/doc/customer_template.xls'
        let lang = Vue.ls.get('lang', 'zh_CN')
        let templateName = '客户Excel模板[下载]'
        if (lang === 'zh_CN') {
          templateUrl = '/doc/customer_template.xls'
        } else {
          templateUrl = '/doc/customer_en_template.xls'
          templateName = 'customer excel template[download]'
        }

        this.$refs.modalImportForm.initModal(importExcelUrl, templateUrl, templateName);
        if (lang === 'zh_CN') {
          this.$refs.modalImportForm.title = "客户导入";
        } else {
          this.$refs.modalImportForm.title = "Customer Import";
        }
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = this.$t('button.edit')
        this.$refs.modalForm.disableSubmit = false;
        if(this.btnEnableList.indexOf(1)===-1) {
          this.$refs.modalForm.isReadOnly = true
        }
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>